@import url(./index.css);

body {
    background-image: url(../images/index-top-background.png);
    background-repeat: no-repeat;
    background-size: 100vw cover;
    background-color: #71C4CC;
    padding: 80rem 0 0;
}

.ranking {
    width: 533rem;
    background-color: #fff;
    border-radius: 10rem;
    margin: 0 10rem;
    position: relative;
}

.ranking .over-top {
    position: absolute;
    width: 100%;
    height: 40rem;
    left: 0;
    top: -60rem;
    color: #fff;
}

.ranking .over-top>img {
    width: 42rem;
    height: 40rem;
    display: block;
    margin-right: 10rem;
}

.ranking>.header {
    width: 100%;
    height: 103rem;
    position: relative;
    overflow: hidden;
    border-radius: 10rem 10rem 0 0;
    padding: 4rem 20rem;
    color: #384052;
}

.ranking>.header * {
    position: relative;
    z-index: 2;
}

.header .header-icon {
    width: 27rem;
    display: block;
    margin-right: 20rem;
}

.header .tips {
    color: #97A5B7;
    padding: 10rem 0 0;
}

.header .input-search {
    margin-left: auto;
    background-color: #FFFFFF;
    border-radius: 6rem;
    border: 1rem solid #AFB2B9;
    position: relative;
    z-index: 2;
    width: 160rem;
    padding: 0 10rem;
}

.input-value {
    background-color: transparent;
    padding: 9rem 0 8rem;
    border: none;
    outline: none;
    font-size: 14rem;
}

.header .input-search .iconfont {
    font-size: 20rem;
    color: #E2B49A;
    cursor: pointer;
}

.ranking>.header::after {
    content: "";
    width: 140%;
    height: 103rem;
    position: absolute;
    left: -20%;
    top: 0;
    border-radius: 0 0 60% 60%;
    background-color: #BFE6F5;
}

.ranking>.ranking-row {
    padding: 16rem 20rem;
    position: relative;
    color: #5F6574;
}

.ranking>.ranking-row::after {
    content: "";
    width: calc(100% - 40rem);
    height: 1px;
    position: absolute;
    left: 20rem;
    bottom: 0;
    border-bottom: 1px solid #D7D9DC;
    transform: scaleY(.7);
}

.ranking:nth-child(1)>.ranking-row:nth-child(-n + 5)>div,
.ranking:nth-child(2)>.ranking-row:nth-child(-n + 4)>div,
.ranking:nth-child(3)>.ranking-row:nth-child(-n + 5)>div {
    color: #576FFA;
}


.avatar-wrap {
    border: 1rem solid #E2B49A;
    position: relative;
    border-radius: 50%;
    margin: 0 10rem;
}

.avatar-wrap .icon-ranking-top {
    position: absolute;
    width: 22rem;
    height: 20rem;
    left: -10rem;
    top: -10rem;
}

.avatar-wrap .avatar {
    width: 26rem;
    height: 26rem;
    display: block;
    border-radius: 50%;
}

.icon-ranking {
    margin: 0 5rem;
    width: 20rem;
}

.ranking>.footer {
    padding: 16rem 20rem 7rem;
    background-color: #ECF3FF;
    margin: 15rem 0 0;
    border-radius: 0 0 10rem 10rem;
}

.footer .tips {
    padding-bottom: 10rem;
}

.footer div {
    color: #5F6574 !important;
}